<template>
    <div class="con">
        <div>
            <h1 id="know">养宠小知识</h1>
        </div>
        <div class="content">
           <!-- 遍历标题 -->
           <div v-for="item in info" :key="item.kid" v-if="item.kid===id" class="title">{{item.knowtitle}}</div>
           <div v-for="item in info" :key="item.kid" v-if="item.kid===id" class="essay">{{item.know}}</div>
        </div>
    </div>
    </template>
    
    <script>
        import axios from "axios"
        export default {
                
            data(){
                return{
                    id:this.$route.params.id,
                    index:0,
                    info:[]
                }
            },
            mounted() {
                var _this=this;
                axios.get("http://localhost:3000/api/knowofpet")
                .then(res=>{
                    console.log("获取数据成功");
                    console.log(res);
                    _this.info=res.data;
                    console.log(_this.info)
                
                })
                .catch(err=>{
                    console.log('获取数据失败'+ err);
                })
              
            }
            
        }
    </script>
    
    <style scoped>
    .con{
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
    }
     .content {
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
        /* border: solid red 3px; */
        border-radius: 50px;
        border: dashed rgba(0, 119, 255, 0.782) 6px;
        background-color: #ffffff;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;

    }
    #know {

        display: flex;
        float: left;
        margin-top: 1%;
        margin-left: 3%;
        font-family: 楷体;
        color: rgba(0, 119, 255, 0.492);
        font-weight: bolder;

    }

    .essay {
        /* border: dashed greenyellow 3px; */
        text-indent: 2em;
        font-size: 200%;
        font-family: 隶书;
        margin: 5%;
    }

    .title {
        margin-top: 2%;
        /* border: dashed greenyellow 3px; */
        text-indent: 2em;
        font-size: 200%;
        font-family: 隶书;
        text-align: center;
    }
    @media screen and (max-width:768px){
            /* 手机屏幕 */
    
     .content{
        zoom:0.5;
         }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */

           
    }
    </style>